<template>
  <el-dialog :model-value="modelValue" @update:model-value="changeModelValue" title="商品出库" width="650px"
    :close-on-click-modal="false" @close="resetFields">
    <el-form ref="formInstance" :model="form" :rules="rules" label-width="auto">
      <!-- <el-form-item label="出库类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :value="1">快递出库</el-radio>
          <el-radio :value="2">自提出库</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.type === 1">
        <el-form-item label="快递单号" prop="transfer">
          <el-input v-model="form.transfer" autofocus maxlength="30" show-word-limit placeholder="请扫描快递条形码"></el-input>
        </el-form-item>
        <el-form-item label="快递费用" prop="transferPrice">
          <el-input v-model="form.transferPrice" autofocus maxlength="30" show-word-limit
            placeholder="请输入快递费用"></el-input>
        </el-form-item>
        <el-form-item label="成本价" prop="price">
          <el-input v-model="form.price" autofocus maxlength="30" show-word-limit placeholder="请输入成本价"></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="salePrice">
          <el-input v-model="form.salePrice" autofocus maxlength="30" show-word-limit placeholder="请输入销售价"></el-input>
        </el-form-item>
        <el-form-item label="客户信息" prop="memo">
          <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="form.memo" autofocus maxlength="300"
            show-word-limit placeholder="请输入客户信息"></el-input>
        </el-form-item>
      </template> -->
      <span>确认要出库这些商品吗？</span>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" @click="confirm"> 确 认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { shopOut } from '@/server/shop';
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  selectedRows: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['update:modelValue', 'callback']);

const formInstance = ref();
const form = ref({});
const rules = ref({
  type: [{ required: true, message: '请选择出库类型', trigger: 'change' }],
  transfer: [{ required: true, message: '请扫描快递条形码', trigger: 'blur' }],
  transferPrice: [{ required: true, message: '请输入快递费用', trigger: 'blur' }],
  price: [{ required: true, message: '请输入成本价', trigger: 'blur' }],
  salePrice: [{ required: true, message: '请输入销售价', trigger: 'blur' }],
  memo: [{ required: true, message: '请输入客服信息', trigger: 'blur' }],
});

const ids = computed(() => {
  return props.selectedRows.map(item => item.id);
});

function changeModelValue(v) {
  emit('update:modelValue', v);
}

function closeModel() {
  changeModelValue(false);
}

/**重置表单校验 */
function resetFields() {
  formInstance.value.resetFields();
  form.value = {};
}

function confirm() {
  formInstance.value.validate(vaild => {
    if (vaild) {
      form.value.ids = ids.value;
      submit();
    } else {
      return false;
    }
  });
}

async function submit() {
  const res = await shopOut({ ...form.value, type: 2 });
  if (res.code == 200) {
    ElMessage.success('操作成功');
    closeModel();
    emit('callback');
  }
}
</script>

<style lang="scss" scoped></style>
